<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <style>
    body,
    ul,
    dl,
    dd {
      margin: 0px;
      padding: 0px;
    }

    .wrap {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: url('images/bg.jpg') no-repeat;
      background-size: 100% 100%;
    }

    .play_wrap {
      width: 800px;
      height: 544px;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -400px;
      margin-top: -272px;
      /* background-color: #f9f9f9; */
    }

    .search_bar {
      height: 60px;
      background-color: #1eacda;
      overflow: hidden;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      z-index: 11;
    }

    .search_bar img {
      margin-left: 23px;
    }

    .search_bar input {
      margin-right: 23px;
      width: 296px;
      height: 34px;
      border-radius: 17px;
      border: 0px;
      background: url('') 265px center no-repeat rgba(255, 255, 255, 0.45);
      text-indent: 15px;
      outline: none;
    }

    .search-icon {
      position: absolute;
      right: 35px;
      cursor: pointer;
    }

    .center_con {
      height: 435px;
      background-color: rgba(255, 255, 255, 0.5);
      display: flex;
    }

    .song_wrapper {
      width: 200px;
      height: 435px;
      box-sizing: border-box;
      padding: 10px;
      list-style: none;
      background: url('images/line.png') right center no-repeat;
      position: relative;
      overflow: hidden;
    }

    .song_list li {
      font-size: 12px;
      color: #333;
      line-height: 36px;
      width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }

    .song_list .active {
      color: #da651e;
    }

    .player_con {
      width: 400px;
      height: 435px;
      position: relative;
    }

    .disc {
      position: absolute;
      left: 73px;
      top: 60px;
      z-index: 9;
    }

    .cover {
      position: absolute;
      left: 125px;
      top: 112px;
      width: 150px;
      height: 150px;
      border-radius: 75px;
      z-index: 8;
    }

    .comment_list {
      width: 200px;
      height: 435px;
      box-sizing: border-box;
      padding: 10px;
      list-style: none;
      background: url('images/line.png') left center no-repeat;
      overflow: hidden;
      position: relative;
    }

    .comment_list dl {
      padding-left: 55px;
      position: relative;
      margin-bottom: 20px;
    }

    .comment_list dt {
      position: absolute;
      left: 4px;
      top: 0px;
    }

    .comment_list dt img {
      width: 40px;
      height: 40px;
      border-radius: 20px;
    }

    .comment_list dd {
      font-size: 12px;
    }

    .comment_list .name {
      font-weight: bold;
      color: #333;
      margin-top: 5px;
    }

    .comment_list .detail {
      color: #666;
      margin-top: 5px;
      line-height: 18px;
    }

    .audio_con {
      height: 50px;
      background-color: #f1f3f4;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
    }

    .myaudio {
      width: 800px;
      height: 40px;
      margin-top: 5px;
      outline: none;
      background-color: #f1f3f4;
    }

    /* 旋转的动画 */
    @keyframes Rotate {
      from {
        transform: rotateZ(0);
      }

      to {
        transform: rotateZ(360deg);
      }
    }

    /* 旋转的类名 */
    .autoRotate {
      animation-name: Rotate;
      animation-iteration-count: infinite;
      animation-play-state: paused;
      animation-timing-function: linear;
      animation-duration: 5s;
    }

    /* 是否正在播放 */
    .playing {
      animation-play-state: running;
    }

    .play_bar {
      position: absolute;
      left: 200px;
      top: -10px;
      z-index: 10;
      transform: rotate(-25deg);
      transform-origin: 12px 12px;
      transition: 1s;
    }

    /* 播放杆 转回去 */
    .play_bar.playing {
      transform: rotate(0);
    }

    /* vue中对应的过渡动画 css3 */
    /* .list-item {
      display: inline-block;
      margin-right: 10px;
    } */

    .list-enter-active,
    .list-leave-active {
      transition: all 1s;
    }

    .list-enter,
    .list-leave-to {
      opacity: 0;
      transform: translateX(30px);
    }

    .fade-enter-active,
    .fade-leave-active {
      transition: all 1s;
    }

    .fade-enter,
    .fade-leave-to {
      opacity: 0;
      transform: translateX(-30px);
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="play_wrap" id="player">
      <!-- 顶部歌曲搜索 -->
      <div class="search_bar">
        <img src="images/player_title.png" alt="" />
        <!-- 搜索输入框 -->
        <input type="text" placeholder="请输入你想听的歌曲" v-model.tirm.lazy="musicName" @keyup.enter="searchMusic" />
        <!-- 搜索按钮 -->
        <img src="images/zoom.png" class="search-icon" alt="" @click="searchMusic" />
      </div>
      <!-- 中间部分，歌曲播放整个面板 -->
      <div class="center_con">
        <!-- 歌曲列表 -->
        <div class="song_wrapper" ref="lwrapper">
          <transition-group tag="ul" name="list" class="song_list">
            <li v-for="(item,index) in resultList" :key="'music'+index" 
              @dblclick="playMusic(item)" :style="{transitionDelay:index*10+'ms'}">
              {{item.name}} - {{item | musName}}
            </li>
          </transition-group>
        </div>
        <!-- 歌曲播放 -->
        <div class="player_con">
          <!-- 播放触杆 -->
          <img src="images/player_bar.png" class="play_bar" :class="{playing:isPlay}" />
          <!-- 黑胶碟片 -->
          <img src="images/disc.png" class="disc autoRotate " :class="{playing:isPlay}" />
          <!-- 歌曲封面 -->
          <img :src="musicPic" class="cover autoRotate " :class="{playing:isPlay}" />
        </div>
        <!-- 歌曲评论 -->
        <div class="comment_list" ref="rwrapper">
          <transition-group name="fade" tag="div">
            <dl v-for="(item,index) in commentsList" :key="'comment'+index">
              <dt><img :src="item.user.avatarUrl" alt="" /></dt>
              <dd class="name">{{item.user.nickname}}</dd>
              <dd class="detail">{{item.content}}</dd>
            </dl>

          </transition-group>
        </div>
      </div>
      <!-- 底部歌曲播放 -->
      <div class="audio_con">
        <audio :src="musicURL" @play="musicPlay" @pause="musicPause" controls="controls" autoplay="autoplay" loop="loop"
          class="myaudio"></audio>
      </div>
    </div>
  </div>
  <script src="./lib/vue.js"></script>
  <script src="./lib/axios.js"></script>
  <script src="./lib/core.min.js"></script>
  <script>
    new Vue({
      el: ".wrap",
      data: {
        // 输入搜索的音乐名称
        musicName: "",
        // 音乐地址
        musicURL: "",
        // 音乐列表的结果
        resultList: [],
        // 评论列表
        commentsList: [],
        // 是否在播放
        isPlay: true,
        // 音乐列表滚动栏
        musicScroll: null,
        // 封面图片
        musicPic: 'images/cover.png',
        lScroll: null,
        rScroll: null
      },
      // vue的实例化，只在js中完成 但没有渲染到页面上，所以一般发送默认的asios请求
      // 我们在这里刚打开默认展示热门音乐榜单
      created() {
        axios.get('https://autumnfish.cn/artist/top/song?id=6452').then((res) => {
          this.resultList = res.data.songs;
        })
      },
      // vue实例化的js对象，DOM元素已经渲染到页面上
      mounted() {
        this.isPlay = false;
        this.lScroll = new BScroll(this.$refs.lwrapper
          // 需要另外安装插件
          // {
          //   bounce: true,//触顶底回弹
          //   mouseWheel: true,
          //   disableTouch: false,
          //   disableMouse: false,
          //   pullUpLoad: true
          // }
        );
        this.rScroll = new BScroll(this.$refs.rwrapper);
      },
      // 如果数据列表发生改变，就刷新
      watch: {
        resultList() {
          this.$nextTick(() => {
            this.lScroll.refresh();
          })
        },
        commentsList() {
          this.$nextTick(() => {
            this.rScroll.refresh();
          })
        }

      },
      filters: {
        // 因为热门音乐的与搜索内容的键值对不相同，所以使用filters
        musName: (item) => {
          // if (item.artists) {
          //   return item.artists[0].name
          // }
          // else {
          //   return item.al.name
          // }
          // 热门歌单里的键值对与id查找到的音乐不同，所以要做判断
          return item.artists ? item.artists[0].name : item.al.name;
        }
      },
      methods: {
        // 搜索歌曲内容
        async searchMusic() {
          this.resultList = [];

          // 输入内容不能为空，否则直接跳出
          if (!this.musicName) {
            alert('输入不能为空！');
            return
          }
          let response = await axios.get("https://autumnfish.cn/search?keywords=" + this.musicName);
          console.log(response);

          let timerId = setTimeout(() => {
            this.resultList = response.data.result.songs;
            clearTimeout(timerId);
          })
          this.musicName = "";
        },
        // dbclick双击播放音乐
        async playMusic(item) {
          console.log(item);

          this.musicPic = ''
          // let resp = await axios.get(`https://music.163.com/song/media/outer/url?id=${id}.mp3`)
          this.musicURL = `https://music.163.com/song/media/outer/url?id=${item.id}.mp3`
          //热门榜单的封面地址与搜索的地址不相同
          let picId = item.album
          if (picId) {
            let album = await axios.get(
              `https://autumnfish.cn/album?id=${picId.id}`
            );
            this.musicPic = album.data.album.picUrl;
          }
          else {
            this.musicPic = item.al.picUrl;
          }
          // 评论列表
          this.commentsList = [];
          let comments = await axios.get(`https://autumnfish.cn/comment/hot?type=0&id=${item.id}`
          );
          this.commentsList = comments.data.hotComments;
        },
        musicPlay() {
          console.log('音乐播放了');
          this.isPlay = true
        },
        musicPause() {
          console.log('音乐暂停了额');
          this.isPlay = false
        }
      },

    }

    )
  </script>
</body>

</html>